<template>

  <el-container class="home-container">
      <!-- 头部导航区域 -->
  <el-header>
      <div class="home-header">
          <img src="" alt="">
          策略管理系统
      </div>
    <!-- 标签 -->
 <!-- <div class="tags">
   <span>{{getpath}}</span>
   <span>X</span>
 </div> -->
      <el-button type="info" @click="loginout">退出</el-button>
  </el-header>
      <!-- 页面主体区域 -->
  <el-container>
      <!-- 侧边栏导航菜单 -->
    <el-aside :width="isCollapse ? '64px' : '200px'">
        <!-- 控制菜单的折叠和展开 -->
        <!-- <div class="toggle-button" @click="toggleButton">|||</div> -->
         <el-menu
      background-color="#091640"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="true"
      :collapse="isCollapse"
      :collapse-transition="false"
      router
      :default-active="$route.path">
      <!-- 一级菜单区域 -->
      <el-submenu :index="item.id + ''" v-for="item in menuList" :key='item.id'>
          <!-- 一级菜单模板 -->
        <template slot="title">
            <!-- 图标 -->
          <!-- 文本 -->
          <span>{{item.authName}}</span>
        </template>

         <el-menu-item :index="'/'+item2.path" v-for="item2 in item.children" :key="item2.id">
              <!-- <i class="el-icon-menu"></i> -->
              <span>{{item2.authName}}</span>
           </el-menu-item>
      </el-submenu>

    </el-menu>
    </el-aside>
    <el-main>
        <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
    data(){
        return{
          dynamicTags: [],
            menuList:[
             {
               id:1,
               authName: "引流策略",
               children: [
                 {id:1,
                 authName: "重点地区引流",
                 path: 'drainage'
                 },
                 {id:2,
                 authName: "虚拟运营商引流",
                 path: "fictitious"
                 },
                  {id:3,
                 authName: "省外固话引流",
                 path: "outsideProvince"
                 },
                   {id:4,
                 authName: "国际长途引流",
                 path: "longDistance"
                 },
             ],

             },
               {
               id:2,
               authName: "号码策略",
             },
               {
               id:3,
               authName: "模板策略",
             },
               {
               id:4,
               authName: "处置策略",
             },
               {
               id:5,
               authName: "配置管理",
             },
               {
               id:6,
               authName: "综合查询",
             },
              {
               id:7,
               authName: "审核管理",
             }
            ],
            isCollapse:false
        }
    },
    computed:{
      // getpath() {
      //    for(var i =0; i<this.menuList.length; i++) {
      //       for(var j = 0; j<this.menuList[i].children; j++) {
      //         if('/' + this.menuList[i].children[j].path == this.$route.path){
      //           return this.menuList[i].children[j].authName;
      //         }
      //       }
      //     }
      // }

    },
    created(){

    },
    methods:{
        loginout(){
            window.sessionStorage.clear();
            this.$router.push('/login');
        },
    }
}
</script>

<style lang="less" scoped>
    .home-container{
    height: 100%;
    }
    .el-header{
        display: flex;
        justify-content: space-between;
        background-color: #091640;
        .home-header{
           display: flex;
           align-items: center;
           color: #fff;
          font-size: 18px;
          font-weight: 20px;
           img{
               margin-right: 10px;
           }
        }
    }
    .el-container{
        background-color: #373d41;
    }
    .el-aside{
        background-color: #091640;

        .el-menu{
            border:0;
        }
    }
    .el-main{
        background-color: #eaedf1;
    }
    .toggle-button{
        background-color: #1b3da2;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        text-align: center;
        letter-spacing: 0.2em;
        cursor: pointer;
    }
    .tags{
      display: flex;
      justify-content: space-between;
      padding: 0 5px;
      width: 150px;
      height: 20px;
      background-color: #7493d6;
      span {
        font-size: 15px;
        color: #fff;
      }
    }

</style>
